import { memo, useEffect, useState } from "react";
import { Swiper as Swipers, Toast, SpinLoading } from "antd-mobile";
import { swiper } from "../../../Api";
import styles from "./Swiper.module.scss";
import { useNavigate } from "react-router-dom";
let Swiper: React.FC = () => {
  let [colors, setColors] = useState([]); //渲染数据
  let [flag, setFlag] = useState(true);
  const data = async () => {
    setFlag(false);
    let { data } = await swiper();
    colors = data.data.single_list;
    setColors([...colors]);
    setFlag(true);
    // console.log(colors);
  };
  useEffect(() => {
    data();
  }, []);
  let to = useNavigate();
  // 组件文件
  const items = colors.map((item: any, index: number) => (
    <Swipers.Item key={index}>
      <div className={styles.content} onClick={() => to("/bookdetails/" + item.goods_id)}>
        <img src={item.goods_thumb} alt="" />
        <div className={styles.name}>
          <h1>{item.goods_name}</h1>
          <p>{item.goods_desc}</p>
          <div className={styles.user}>
            <img src={item.expert_info.avatar} alt="" />
            <p>{item.expert_info.name}</p>
          </div>
        </div>
      </div>
    </Swipers.Item>
  ));

  return (
    <>
      {/* 轮播图组件显示 */}
      <SpinLoading style={{ display: flag ? "none" : "block" }} />
      {Boolean(colors.length) && (
        <Swipers loop autoplay indicator={() => null} autoplayInterval={5000}>
          {items}
        </Swipers>
      )}
    </>
  );
};
export default memo(Swiper);
